<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撩课-后台管理系统</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="node_modules/nprogress/nprogress.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 管理系统头部 -->
    <div class="header">
        <nav class="navbar navbar-custom">
            <div class="navbar-header">
                <a href="javascript:;" class="navbar-brand">撩课教育后台管理系统</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="javascript:;"><i class="fa fa-cloud-upload"></i>教育云中心</a></li>
                <li><a href="javascript:;"><i class="fa fa-yelp"></i>分销中心</a></li>
                <li><a href="javascript:;"><i class="fa fa-xing"></i>CRM对接中心</a></li>
                <li><a href="setting.html"><i class="fa fa-user"></i>个人中心</a></li>
                <li><a href="javascript:;"><i class="fa fa-bell"></i><span class="badge">20</span></a></li>
                <li><a href="javascript:;"><i class="fa fa-sign-out"></i>退出</a></li>
            </ul>
        </nav>
    </div>
    <!-- 主体 -->
    <div class="main">
        <!-- 侧边栏 -->
        <div class="aside">
            <!-- 个人资料 -->
            <div class="profile">
                <!-- 头像 -->
                <div class="avatar img-circle">
                    <img src="./uploads/avatar.png">
                </div>
                <h4>旋之华</h4>
            </div>
            <!-- 导航菜单 -->
            <div class="navs">
                <ul class="list-unstyled">
                    <li>
                        <a href="./index.html" class="active">
                            <i class="fa fa-area-chart"></i>
                            数据分析
                        </a>
                    </li>
                    <li>
                        <a href="./user_list.html">
                            <i class="fa fa-users"></i>
                            用户中心
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="fa fa-object-group"></i>
                            课程管理
                            <i class="arrow fa fa-angle-right"></i>
                        </a>
                        <ul class="list-unstyled">
                            <li>
                                <a href="./course_add.html">
                                    课程添加
                                </a>
                            </li>
                            <li>
                                <a href="./course_list.html">
                                    课程列表
                                </a>
                            </li>
                            <li>
                                <a href="./course_category.html">
                                    课程分类
                                </a>
                            </li>
                            <li>
                                <a href="./course_topic.html">
                                    课程专题
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="docent_list.html">
                            <i class="fa fa-bars"></i>
                            运营中心
                        </a>
                    </li>
                    <li>
                        <a href="sowing_list.html">
                            <i class="fa fa-calculator"></i>
                            LK建模中心
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="fa fa-cog"></i>
                            设置中心
                            <i class="arrow fa fa-angle-right"></i>
                        </a>
                        <ul class="list-unstyled">
                            <li><a href="javascript:;">站点设置</a></li>
                            <li><a href="javascript:;">用户设置</a></li>
                            <li><a href="javascript:;">角色管理</a></li>
                            <li><a href="javascript:;">课程设置</a></li>
                            <li><a href="javascript:;">运营设置</a></li>
                            <li><a href="javascript:;">财务设置</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <!-- 个人资料 -->
            <div class="body teacher-profile">
                <div class="profile">
                    <div class="row c1">
                        <div class="col-md-4">
                            <div class="cell s1">
                                <i class="fa fa-users"></i>
                                <h4>登录用户</h4>
                                <h5>13,000</h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="cell s2">
                                <i class="fa fa-registered"></i>
                                <h4>新增注册</h4>
                                <h5>12,00</h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="cell s3">
                                <i class="fa fa-camera"></i>
                                <h4>课程新增学员</h4>
                                <h5>123</h5>
                            </div>
                        </div>
                    </div>
                    <div class="row c1">
                        <div class="col-md-4">
                            <div class="cell s4">
                                <i class="fa fa-safari"></i>
                                <h4>班级新增学员</h4>
                                <h5>666</h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="cell s5">
                                <i class="fa fa-opera"></i>
                                <h4>新增会员</h4>
                                <h5>1122</h5>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="cell s6">
                                <i class="fa fa-question"></i>
                                <h4>未回复问答</h4>
                                <h5>236</h5>
                            </div>
                        </div>
                    </div>
                    <div class="lk-chart">
                        <div class="chart">
                            <div id="main1" style="height:400px;"></div>
                        </div>
                        <div class="chart">
                            <div id="main2" style="height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="node_modules/nprogress/nprogress.js"></script>
    <script src="node_modules/echarts/dist/echarts.js"></script>
    <script src="js/base.js"></script>
    <script>
        let main1 = echarts.init(document.getElementById('main1'));
        let option = {
            title: {
                text: '订单统计'
            },
            tooltip: {},
            legend: {
                data:['购买数量']
            },
            xAxis: {
                data: ["Web全栈","JavaEE","Python","React实战","Vue实战","Node实战"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [45, 10, 26, 29, 23, 33]
            }]
        };
        main1.setOption(option);

        let main2 = echarts.init(document.getElementById('main2'));
        let option2 = {
            title : {
                text: '付费订单统计',
                subtext: '最近7天',
                x:'right',
                y:'bottom'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['Chrome','Firefox','Safari','IE9+','IE8-']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            series : (function (){
                let series = [];
                for (let i = 0; i < 30; i++) {
                    series.push({
                        name:'付费订单统计',
                        type:'pie',
                        itemStyle : {normal : {
                                label : {show : i > 28},
                                labelLine : {show : i > 28, length:20}
                            }},
                        radius : [i * 4 + 40, i * 4 + 43],
                        data:[
                            {value: i * 128 + 80,  name:'Java'},
                            {value: i * 64  + 160,  name:'Web'},
                            {value: i * 32  + 320,  name:'Python'},
                            {value: i * 16  + 640,  name:'Node'},
                            {value: i * 8  + 1280, name:'大数据+'}
                        ]
                    })
                }
                series[0].markPoint = {
                    symbol:'emptyCircle',
                    symbolSize:series[0].radius[0],
                    effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
                    data:[{x:'50%',y:'50%'}]
                };
                return series;
            })()
        };
        main2.setOption(option2);
    </script>
</body>
</html>
